<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-6 col-sm-6">
      <div class="card card-stats">
        <div class="card-header" data-background-color="orange">
          <i class="fa fa-bookmark"></i>
        </div>
        <div class="card-content">
          <p class="category">Bookings</p>
          <h3 class="card-title">184</h3>
        </div>
        <div class="card-footer">
          <div class="stats">
            <i class="fa fa-exclamation-triangle text-danger"></i>
            <span>Get More Space...</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-6">
      <div class="card card-stats">
        <div class="card-header" data-background-color="red">
          <i class="fa fa-area-chart"></i>
        </div>
        <div class="card-content">
          <p class="category">Views</p>
          <h3 class="card-title">75.521</h3>
        </div>
        <div class="card-footer">
          <div class="stats">
            <i class="fa fa-tag"></i>
            <span>Google Analytics</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-6">
      <div class="card card-stats">
        <div class="card-header" data-background-color="blue">
          <i class="fa fa-building-o"></i>
        </div>
        <div class="card-content">
          <p class="category">Revenue</p>
          <h3 class="card-title">$3,245</h3>
        </div>
        <div class="card-footer">
          <div class="stats">
            <i class="fa fa-calendar-o"></i>
            <span>Last 24 Hours</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 col-sm-6">
      <div class="card card-stats">
        <div class="card-header" data-background-color="green">
          <i class="fa fa-weixin"></i>
        </div>
        <div class="card-content">
          <p class="category">Followers</p>
          <h3 class="card-title">+245</h3>
        </div>
        <div class="card-footer">
          <div class="stats">
            <i class="fa fa-clock-o"></i>
            <span>Just Updated</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4 col-md-6">
      <div class="card card-product">
        <div class="card-image" data-header-animation="true">
          <a>
            <img class="img" src="../../../assets/images/card-2.jpeg">
          </a>
        </div>
        <div class="card-content">
          <div class="card-actions">
            <button class="btn btn-danger btn-simple fix-broken-card" type="button">
              <i class="fa fa-wrench"></i>
              <span>Fix Header!</span>
            </button>
            <button class="btn btn-default btn-simple" data-placement="bottom" rel="tooltip" title="" type="button"
                    data-original-title="View">
              <i class="fa fa-id-card-o"></i>
            </button>
            <button class="btn btn-success btn-simple" data-placement="bottom" rel="tooltip" title="" type="button"
                    data-original-title="Edit">
              <i class="fa fa-pencil"></i>
            </button>
            <button class="btn btn-danger btn-simple" data-placement="bottom" rel="tooltip" title="" type="button"
                    data-original-title="Remove">
              <i class="fa fa-close"></i>
            </button>
          </div>
          <h4 class="card-title">
            <a>Cozy 5 Stars Apartment</a>
          </h4>
          <div class="card-description">
            The place is close to Barceloneta Beach and bus stop just 2 min by walk and...
          </div>
        </div>
        <div class="card-footer">
          <div class="price">
            <h4>$899/night</h4>
          </div>
          <div class="stats pull-right">
            <p class="category">
              <i class="fa fa-map-marker"></i>
              <span>Barcelona, Spain</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="card card-product">
        <div class="card-image" data-header-animation="true">
          <a>
            <img class="img" src="../../../assets/images/card-3.jpeg">
          </a>
        </div>
        <div class="card-content">
          <div class="card-actions">
            <button class="btn btn-danger btn-simple fix-broken-card" type="button">
              <i class="fa fa-wrench"></i>
              <span>Fix Header!</span>
            </button>
            <button class="btn btn-default btn-simple" data-placement="bottom" rel="tooltip" title="" type="button"
                    data-original-title="View">
              <i class="fa fa-id-card-o"></i>
            </button>
            <button class="btn btn-success btn-simple" data-placement="bottom" rel="tooltip" title="" type="button"
                    data-original-title="Edit">
              <i class="fa fa-pencil"></i>
            </button>
            <button class="btn btn-danger btn-simple" data-placement="bottom" rel="tooltip" title="" type="button"
                    data-original-title="Remove">
              <i class="fa fa-close"></i>
            </button>
          </div>
          <h4 class="card-title">
            <a>Office Studio</a>
          </h4>
          <div class="card-description">
            The place is close to Metro Station and bus stop just 2 min by walk and near...
          </div>
        </div>
        <div class="card-footer">
          <div class="price">
            <h4>$1.119/night</h4>
          </div>
          <div class="stats pull-right">
            <p class="category">
              <i class="fa fa-map-marker"></i>
              <span>London, UK</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-md-6">
      <div class="card card-product">
        <div class="card-image" data-header-animation="true">
          <a>
            <img class="img" src="../../../assets/images/card-1.jpeg">
          </a>
        </div>
        <div class="card-content">
          <div class="card-actions">
            <button class="btn btn-danger btn-simple fix-broken-card" type="button">
              <i class="fa fa-wrench"></i>
              <span>Fix Header!</span>
            </button>
            <button class="btn btn-default btn-simple" data-placement="bottom" rel="tooltip" title="" type="button"
                    data-original-title="View">
              <i class="fa fa-id-card-o"></i>
            </button>
            <button class="btn btn-success btn-simple" data-placement="bottom" rel="tooltip" title="" type="button"
                    data-original-title="Edit">
              <i class="fa fa-pencil"></i>
            </button>
            <button class="btn btn-danger btn-simple" data-placement="bottom" rel="tooltip" title="" type="button"
                    data-original-title="Remove">
              <i class="fa fa-close"></i>
            </button>
          </div>
          <h4 class="card-title">
            <a>Beautiful Castle</a>
          </h4>
          <div class="card-description">
            The place is close to Metro Station and bus stop just 2 min by walk and near...
          </div>
        </div>
        <div class="card-footer">
          <div class="price">
            <h4>$459/night</h4>
          </div>
          <div class="stats pull-right">
            <p class="category">
              <i class="fa fa-map-marker"></i>
              <span>Milan, Italy</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header card-header-icon" data-background-color="red">
          <i class="fa fa-map"></i>
        </div>
        <div class="card-content">
          <h4 class="card-title">Global Sales by Top Locations</h4>
          <div class="row">
            <div class="col-md-12">
              <div class="content table-responsive">
                <table class="table">
                  <tbody>
                  <tr>
                    <td>
                      <div class="flag">
                        <img src="../../../assets/images/flags/us.png"/>
                      </div>
                    </td>
                    <td>USA</td>
                    <td>2.920</td>
                    <td>53.23%</td>
                  </tr>
                  <tr>
                    <td>
                      <div class="flag">
                        <img src="../../../assets/images/flags/de.png"/>
                      </div>
                    </td>
                    <td>Germany</td>
                    <td>1.300</td>
                    <td>20.43%</td>
                  </tr>
                  <tr>
                    <td>
                      <div class="flag">
                        <img src="../../../assets/images/flags/au.png"/>
                      </div>
                    </td>
                    <td>Australia</td>
                    <td>760</td>
                    <td>10.35%</td>
                  </tr>
                  <tr>
                    <td>
                      <div class="flag">
                        <img src="../../../assets/images/flags/gb.png"/>
                      </div>
                    </td>
                    <td>United Kingdom</td>
                    <td>690</td>
                    <td>7.87%</td>
                  </tr>
                  <tr>
                    <td>
                      <div class="flag">
                        <img src="../../../assets/images/flags/ro.png"/>
                      </div>
                    </td>
                    <td>Romania</td>
                    <td>600</td>
                    <td>5.94%</td>
                  </tr>
                  <tr>
                    <td>
                      <div class="flag">
                        <img src="../../../assets/images/flags/br.png"/>
                      </div>
                    </td>
                    <td>Brasil</td>
                    <td>550</td>
                    <td>4.34%</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <div class="card card-chart">
        <div class="card-header" data-background-color="green" data-header-animation="true">
          <div class="ct-chart">
            <img src="../../../assets/images/chart-1.png">
          </div>
        </div>
        <div class="card-content">
          <div class="card-actions">
            <button class="btn btn-danger btn-simple fix-broken-card" type="button">
              <i class="fa fa-wrench"></i>
              <span>Fix Header!</span>
            </button>
            <button class="btn btn-info btn-simple" data-placement="bottom" rel="tooltip" title="" type="button"
                    data-original-title="View">
              <i class="fa fa-repeat"></i>
            </button>
            <button class="btn btn-default btn-simple" data-placement="bottom" rel="tooltip" title="" type="button"
                    data-original-title="Edit">
              <i class="fa fa-pencil"></i>
            </button>
          </div>
          <h4 class="card-title">Daily Sales</h4>
          <p class="category">
            <span class="text-success">
              <i class="fa fa-long-arrow-up"></i>
              <span>55% </span>
              <span>increase in today sales.</span>
              </span>
          </p>
        </div>
        <div class="card-footer">
          <div class="stats">
            <i class="fa fa-clock-o"></i>
            <span>updated 4 minutes ago</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card card-chart">
        <div class="card-header" data-background-color="orange" data-header-animation="true">
          <div class="ct-chart">
            <img src="../../../assets/images/chart-2.png">
          </div>
        </div>
        <div class="card-content">
          <div class="card-actions">
            <button class="btn btn-danger btn-simple fix-broken-card" type="button">
              <i class="fa fa-wrench"></i>
              <span>Fix Header!</span>
            </button>
            <button class="btn btn-info btn-simple" data-placement="bottom" rel="tooltip" title="" type="button"
                    data-original-title="View">
              <i class="fa fa-repeat"></i>
            </button>
            <button class="btn btn-default btn-simple" data-placement="bottom" rel="tooltip" title="" type="button"
                    data-original-title="Edit">
              <i class="fa fa-pencil"></i>
            </button>
          </div>
          <h4 class="card-title">Completed Tasks</h4>
          <p class="category">Last Campaign Performance</p>
        </div>
        <div class="card-footer">
          <div class="stats">
            <i class="fa fa-clock-o"></i>
            <span>campaign sent 2 days ago</span>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card card-chart">
        <div class="card-header" data-background-color="red" data-header-animation="true">
          <div class="ct-chart">
            <img src="../../../assets/images/chart-3.png">
          </div>
        </div>
        <div class="card-content">
          <div class="card-actions">
            <button class="btn btn-danger btn-simple fix-broken-card" type="button">
              <i class="fa fa-wrench"></i>
              <span>Fix Header!</span>
            </button>
            <button class="btn btn-info btn-simple" data-placement="bottom" rel="tooltip" title="" type="button"
                    data-original-title="View">
              <i class="fa fa-repeat"></i>
            </button>
            <button class="btn btn-default btn-simple" data-placement="bottom" rel="tooltip" title="" type="button"
                    data-original-title="Edit">
              <i class="fa fa-pencil"></i>
            </button>
          </div>
          <h4 class="card-title">Website Views</h4>
          <p class="category">Last Campaign Performance</p>
        </div>
        <div class="card-footer">
          <div class="stats">
            <i class="fa fa-clock-o"></i>
            <span>campaign sent 2 days ago</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
